<template>
  <div class="task-items">
    <el-table :data="tabelData" size="small" stripe style="width: 100%;" v-loading="listLoading">
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column label="任务名称" min-width="280" align="left">
        <template slot-scope="{row}">
            <div style="cursor: pointer;" @click="linkToReport(row)">
              <span class="subTask">{{ row.variables.bussName }}</span>
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="variables.classify_name" label="上报类型" min-width="120"></el-table-column>
      <el-table-column label="紧急程度" min-width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.variables.emergency | tagType">
            {{ row.variables.emergency }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="截止日期" min-width="180">
        <template slot-scope="{row}">
          <span>{{ parseTime(row.variables.end_time) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination 
      class="pageWrapper" 
      v-show="total>0" 
      :total="total" 
      :layout="'total, prev, pager, next'" 
      :page.sync="page" 
      :limit.sync="pageSize" 
      @pagination="handlePage" 
    />
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    getPendingTaskInfo
  } from '@/api/work.js'
  import { parseTime } from '@/utils'
  export default {
    name: 'IndexCenter',
    components: {
            'Pagination': require('@/components/Pagination').default,
          },
    props: {
      tabelData: {
        type: Array,
        defalut: []
      },
      isHand: {
        type: Boolean,
        defalut: false
      },
      total:{
                  type: Number,
                  defalut: 0
              }
    },
    data() {
      return {
        listLoading: false,
        pageSize: 10,
              page: 1
      }
    },
    computed: {
      ...mapGetters([
        'id'
      ]),
    },
    mounted() {
      // this.requestTaskList()
    },
    methods: {
      parseTime,
      linkToReport(item) {
        const { variables, proInsId, procInstId, proDefId, procDefId, id } = item
        this.$router.push({
          name: this.isHand ? 'PreviewTask' : 'ReportTask',
          params: {
            id: id,
            proDefId: this.isHand ? proDefId : procDefId,
            proInsId: this.isHand ? proInsId : procInstId,
            targetId: variables.businessKey,
            variables: variables,
            isHand: this.isHand,
            showPager: true
          }
        })
      },
                linkUrl(row){
                  let url = this.isHand ? '' : '?processId=' + row.id
                  return '/task-center/report/'+row.variables.bussinesskey + url
                },
      // 分页
      handlePage(val) {
              this.$emit('handPage', this.isHand, val.page)
            },
    },
  }

</script>
<style lang="scss">
  .task-items {
    margin-top: 20px;

    .overdue-text {
      font-size: 12px;
      color: #fff;
      background: #ff6060;
      border-radius: 4px;
      padding: 1px 3px;
      margin-left: 2px;
    }

    .no-pub {
      background: #a1cfff;
    }

  }

</style>
<style>

</style>
